<template>
<xdh-layout class="main-layout" :fixed="true" 
            :north="layoutOpt.north"
>
  <slot name="header" slot="north" >
    <xdh-header 
      title="株洲系统" 
      :tools="headTools"
      user-icon="iconfont icon-user"
      user-text="超级管理者"
      layout="logo, title, -> ,user, tool"
    >
      <img slot="logo" src="" alt="" />
    </xdh-header>
  </slot>
  <div ref="main" class="layout-main" style="height: 100%;">
    <transition :enter-active-class="enter" :leave-active-class="leave" >
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <div class="prev" @click="prev"><i class="el-icon-arrow-left"></i></div>
    <div class="next" @click="next"><i class="el-icon-arrow-right"></i></div> 
  </div>
</xdh-layout>
</template>

<style lang="scss" scoped>
.prev, .next {
  position: absolute;
  font-size: 30px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .5);
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

 
</style>

<script>
import XdhLayout from '@/widgets/xdh-layout'
import XdhHeader from '@/widgets/xdh-header'
import 'animate.css'

export default {
  name: 'index',
  components: {
    XdhLayout,
    XdhHeader
    // intelAnalysis,
    // controlPanel,
    // platform
  },
  props: {},
  data() {
    return {
      layoutOpt: {
        north: {}
      },
      headTools: [
        {
          id: 'logout',
          icon: 'iconfont icon-exit',
          text: '登出'
        }
      ],
      currentIndex: 0,
      paths: ['/intel-analysis', '/', '/control-panel'],
      enter: 'animated slideInRight',
      leave: 'animated slideOutLeft'
    }
  },
  computed: {
  },
  methods: {
    next() {
      this.enter = 'animated slideInRight'
      this.leave = 'animated slideOutLeft'
      this.currentIndex += 1
      if (this.currentIndex >= this.paths.length) {
        this.currentIndex = 0
      }
      this.go()
    },
    prev() {
      this.enter = 'animated slideInLeft'
      this.leave = 'animated slideOutRight'
      this.currentIndex -= 1
      if (this.currentIndex < 0) {
        this.currentIndex = this.paths.length - 1
      }
      this.go()
    },
    go() {
      this.$router.push(this.paths[this.currentIndex])
      // console.log(this.currentIndex, this.paths[this.currentIndex])
    }
  },
  mounted() {
    
  }
}
</script>

